<template>
  <a-card class="mb20">
    <titleName title="交底记录信息" />
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-model-item label="现行版本：" prop="currentVersion">
            <BaseInput v-model.trim="form.currentVersion" :max-length="30" placeholder="请输入" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item label="编制人员：" prop="programmerUserId">
            <!-- <BaseInput v-model.trim="form.programmer" :max-length="30" placeholder="请输入" disabled /> -->
            <SelectPersonByProject
              :id="form.branchCompanyId"
              disabled
              v-model="form.programmerUserId"
              :project-id="formData.projectId"
              :show-search="true"
              @personChanged="getOption"
            />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item label="会议地点：" prop="meetingPlace">
            <BaseInput v-model.trim="form.meetingPlace" :max-length="30" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item label="会议时间：" prop="startTime">
            <a-date-picker v-model="form.startTime" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD" placeholder="请输入" @change="(date, dateString) => getTime(date, dateString, 'form', 'startTime')" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item label="交底人：" prop="confessUserId">
            <SelectPersonByProject
              :id="form.branchCompanyId"
              v-model="form.confessUserId"
              :project-id="formData.projectId"
              :show-search="true"
              mode="combobox"
              placeholder="请选择"
              option-label-prop="children"
              @personChanged="personChanged($event)"
            />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24" v-if="formData.isProSub">
          <a-form-model-item label="主要参会人员：" prop="mainParticipants">
            <BaseTextarea v-model.trim="form.mainParticipants" :max-length="300" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24" v-if="!formData.isProSub">
          <a-form-model-item label="参会者选择：" prop="meetingEmployeeVOList">
            <div class="mb12">
              <a-button icon="plus" class="btn_right" type="primary" @click="openSelectPersonModal"> 添加人员 </a-button>
              <a-button :disabled="rowSelection.selectedRowKeys.length < 1" icon="delete" type="danger" @click="handleRemoveMore"> 移除 </a-button>
            </div>
            <!-- 统计选中项 -->
            <a-alert :show-icon="true">
              <template slot="message">
                <span style="margin-right: 12px">
                  已选择:
                  <a>
                    <b>{{ rowSelection.selectedRowKeys.length }}</b>
                  </a>
                  项
                </span>
              </template>
            </a-alert>
            <!-- 表格 -->
            <s-table
              ref="tableEmployee"
              table-layout="fixed"
              size="default"
              row-key="id"
              :columns="columnsEmployee"
              :data="loadDataEmployee"
              :alert="true"
              :row-selection="rowSelection"
              show-size-changer
              show-quick-jumper
              show-pagination="auto"
            >
              <!-- 表格行操作栏 -->
              <span slot="actions" slot-scope="text, record, index">
                <template>
                  <a @click="handleRemove(index)">移除</a>
                </template>
              </span>
            </s-table>
          </a-form-model-item>
          <!-- </a-col> -->
        </a-col>
        <a-col :md="24" :sm="24" v-if="formData.isProSub">
          <a-form-model-item label="会议纪要：" prop="meetingSummary">
            <BaseTextarea v-model.trim="form.meetingSummary" :max-length="300" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item label="现场照片">
            <upload-list :businessCode="'BM24'" :uploadArrys.sync="form.sitPhotoList" uploadType="image" :editModel="2" multiple></upload-list>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24" v-if="!formData.isProSub">
          <a-form-model-item label="主要内容：" prop="meetingSummary">
            <BaseTextarea v-model.trim="form.meetingSummary" :max-length="300" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item label="附件上传">
            <upload-list :businessCode="'BM24'" :uploadArrys.sync="form.fileList" :editModel="2" multiple></upload-list>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 表单弹窗 -->
    <dialog-edit ref="dialogEdit" :meeting-employee-d-t-o-list-data="form.meetingEmployeeVOList" :visible.sync="visible" @confirm="submitForm" @confirms="submitForms" />
    <SelectPerson ref="SelectPersonWithTree" header-title="添加参会人员" :un-repeat-person="true" @confirm="submitForms" />
    <div class="tool-btns page-btn-right-top">
      <a-button type="primary" @click="discloseSave" :loading="loading">提交</a-button>
      <a-button @click="handleClose" style="margin-left: 10px"> 关闭 </a-button>
    </div>
  </a-card>
</template>
<script>
import SelectPersonByProject from '@/components/Select/SelectPersonByProject' // 分公司
import UploadList from '@/components/UploadList'
import dialogEdit from './dialogEdit.vue' // 表单弹窗
import SelectPerson from '@/components/BComponents/BSelectPerson'
import { getDetails } from '@/api/technical/approval'
import { createTechnicalProgramConfess } from '@/api/office/conference'
const columnsEmployee = [
  {
    title: '员工名称',
    dataIndex: 'name'
  },

  {
    title: '电话号码',
    dataIndex: 'phone'
  },

  {
    title: '操作',
    dataIndex: 'actions',
    width: '100px',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  components: {
    SelectPersonByProject,
    UploadList,
    dialogEdit,
    SelectPerson
  },
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      columnsEmployee,
      form: {
        sitPhotoList: [],
        meetingEmployeeVOList: [],
        currentVersion: null,
        fileList: []
      },
      loading: false,
      rules: {
        meetingSummary: [{ required: true, message: '请填写会议纪要', trigger: 'change' }],
        meetingPlace: [{ required: true, message: '请填写会议地点', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
        confessUserId: [{ required: true, message: '请选择交底人', trigger: 'blur' }],
        mainParticipants: [{ required: true, message: '请填写主要参会人员', trigger: 'change' }],
        // sitPhotoList: [{ required: true, message: '请上传现场照片', trigger: 'change' }],
        // fileList: [{ required: true, message: '请上传附件', trigger: 'change' }],
        mainParticipants: [{ required: true, message: '请填写主要参会人员', trigger: 'change' }]
      },
      visible: false,
      // 表格复选框配置
      rowSelection: {
        selectedRowKeys: [],
        onChange(selectedRowKeys) {
          this.selectedRowKeys = selectedRowKeys
        }
      },
      loadDataEmployee: (parameter) => {
        return new Promise((resolve, reject) => {
          let obj = {}
          obj.currentPage = parameter.pageNo
          obj.pageSize = parameter.pageSize
          obj.totalPage = Math.ceil(this.form.meetingEmployeeVOList.length / parameter.pageSize)
          obj.totalSize = this.form.meetingEmployeeVOList.length
          obj.data = this.form.meetingEmployeeVOList || []
          resolve(obj)
        })
      }
    }
  },
  methods: {
    getTime(date, dateString, type, name) {
      this[type][name] = dateString
      console.log(this[type][name])
    },
    openSelectPersonModal() {
      const list = this.form.meetingEmployeeVOList
      this.$refs.SelectPersonWithTree.open(list)
    },
    // 提交表单
    submitForm(e) {
      this.form.meetingEmployeeVOList.push(e)
      console.log(this.form.meetingEmployeeVOList)
      this.$refs.tableEmployee.refresh(true)
    },
    submitForms(e) {
      e.forEach((item) => {
        this.form.meetingEmployeeVOList.push(item)
      })
    },
    handleRemove(index) {
      this.form.meetingEmployeeVOList.splice(index, 1)
      this.$refs.tableEmployee.refresh(true)
    },
    // 移除表格选中项
    handleRemoveMore() {
      // 若有选中项
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '确定移除这些数据？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          console.log(that.rowSelection.selectedRowKeys)
          for (let index = 0; index < that.form.meetingEmployeeVOList.length; index++) {
            let item = that.form.meetingEmployeeVOList[index]
            console.log(index, item.id)
            if (that.rowSelection.selectedRowKeys.includes(item.id)) {
              that.form.meetingEmployeeVOList.splice(index, 1)
              index--
            }
          }
          that.$refs.tableEmployee.clearSelected()
          that.$refs.tableEmployee.refresh(true)
          // console.log(that.rowSelection.selectedRowKeys)
        }
      })
    },
    getDetailsFn(id) {
      getDetails({ id: id }).then((res) => {
        if (res.code == 200) {
          this.form.currentVersion = res.data.currentVersion
          //this.$set(this.form, 'programmer', res.data.filledUserName)
          this.$set(this.form, 'programmerUserId', res.data.compiler)
        }
      })
    },
    getOption(val){
        this.$set(this.form, 'programmer', val?.employeeName)
    },
    personChanged(e) {
      this.$set(this.form, 'confessUserName', e?.employeeName)
    },
    handleClose() {
      this.$multiTab.close(this.$route.fullpath)
    },
    discloseSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.sitPhotoList.length) {
            this.$message.warning('请上传现场照片')
            return
          }
          if (!this.form.fileList.length) {
            this.$message.warning('请上传附件')
            return
          }
          let params = {
            meetId: this.formData.id,
            ...this.form
          }
          if(this.form.meetingEmployeeVOList.length>0){
            this.form.meetingEmployeeVOList.map((item)=>{
              delete item.id;  //王先敏说要去掉，不然要报错
            })
          }
          if(!this.formData.isProSub){
            if(this.form.meetingEmployeeVOList.length == 0){
              this.$message.warning('请选择参会者')
            return
            }
          }
          this.loading = true
          createTechnicalProgramConfess(params).then((res) => {
            this.loading = false
            if (res[1].code == 200) {
              this.$message.success('新增成功')
              this.handleClose()
            }
          })
        }
      })
    }
  },
  mounted() {
    console.log(this.formData,122,this.form)
    if (this.formData.confessId) {
      this.getDetailsFn(this.formData.confessId)
    }
  }
}
</script>